import React, {
  Component,
  useState,
  useRef,
  createContext,
  useContext,
} from "react";
import classNames from "classnames";
import "./index.css";
/* 
  1.使用createContext()方法创建一个上下文对象Ctx
  2.在顶层组件(Parent)中通过Ctx.Provider组件提供数据
  3.在顶层组件(Son)中通过useContext钩子函数获取消费数据
*/
let Ctx = createContext();
export default function Parent() {
  let name = "传递来的数据123";
  return (
    <>
      {/* 必须为value */}
      <Ctx.Provider value={{ name }}>
        <Child></Child>
      </Ctx.Provider>
    </>
  );
}
function Child() {
  const receiveMsg = useContext(Ctx);
  console.log(receiveMsg, "child接收的数据");

  return (
    <>
      <h1>这是child组件</h1>
      <Son></Son>
    </>
  );
}
function Son(props) {
  const receiveMsg = useContext(Ctx);
  console.log(receiveMsg, "son接收的数据");
  return (
    <>
      <h1>son组件</h1>
      <p>接收的数据{receiveMsg.name}</p>
    </>
  );
}
